<template>
    <el-container>
        <el-dialog :visible.sync="getFile.open" title="上传文件">
          <el-tabs type="border-card" v-model="tabPosition">
            <el-tab-pane label="上传文件" name="first">
              <el-row :gutter="10">
                <el-row>
                  <el-input v-model="uploadFile" readonly></el-input>
                </el-row>
                <el-row>

                </el-row>
                <el-row>
                  <el-upload
                    accept="*.*"
                    :headers="getFile.headers"
                    :action="getFile.uploadFileUrl"
                    :on-success="handleFileSuccess"
                    :limit="1"
                    :file-list="getFile.fileName">
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-row>
              </el-row>
            </el-tab-pane>
          </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button @click="fileCancel();">取 消</el-button>
                <el-button type="primary" @click="fileOK();">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="getModifyFile.open" title="上传文件">
          <el-tabs type="border-card" v-model="tabPosition">
            <el-tab-pane label="上传文件" name="first">
              <el-row :gutter="10">
                <el-row>
                  <el-input v-model="uploadModifyFile" readonly></el-input>
                </el-row>
                <el-row>

                </el-row>
                <el-row>
                  <el-upload
                    accept="*.*"
                    :headers="getModifyFile.headers"
                    :action="getModifyFile.uploadFileUrl"
                    :on-success="handleModifyFileSuccess"
                    :limit="1"
                    :file-list="getModifyFile.fileName">
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-row>
              </el-row>
            </el-tab-pane>
          </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button @click="modifyFileCancel();">取 消</el-button>
                <el-button type="primary" @click="modifyFileOK();">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="confirmModifyText.open" title="修改文本">
          <el-row>
            <el-col :span="3">文本</el-col>
            <el-col :span="21"><el-input v-model="confirmModifyText.confirmText" :rows="5" type="textarea"></el-input></el-col>
          </el-row>
          <span slot="footer" class="dialog-footer">
                <el-button @click="confirmTextCancel();">取 消</el-button>
                <el-button type="primary" @click="confirmTextOK();">确 定</el-button>
          </span>
        </el-dialog>
        <el-header style="height: 50px;">与{{robotName}}的对话</el-header>

          <el-row>
            <el-col :span="12">
              <el-main>
                <el-row>
                <el-card>
                  <div position="center">
                    <el-button style="width: 100%;" @click="loadHistory" primary>加载历史对话</el-button>
                  </div>
                    <div class="chat-box">

                        <div v-for="(msg,index) in messageList">
                            <div v-if="msg.msgtype === 'bot'">

                                <el-row class="bot-message">
                                  <el-col :span="2">
                                    <div><img :src="toAvatar" style="height: 40px;width:40px;border-radius: 5px; " lazy></img></div>
                                  </el-col>
                                  <div v-if="msg.reply.length > 0" class="message-content botcontent">{{ msg.reply }}</div>
                                  <div v-else class="message-content botcontent">无内容</div>
                                  <el-col :span="22">
                                  </el-col>
                                </el-row>
                                <el-row v-if="msg.robotfile !== ''" class="bot-message message-content">
                                    <div class="message-content botcontent"><a :href="msg.robotfile">[文件]{{ msg.robotfilename }}</a></div>
                                </el-row>
                            </div>
                            <div v-if="msg.msgtype === 'engineer' || msg.msgtype === 'user'">
                                <el-row class="bot-message">
                                  <el-col :span="22"></el-col>
                                  <div v-if="msg.content.length > 0" class="message-content usercontent">{{ msg.content }}</div>
                                  <div v-else class="message-content usercontent">无内容</div>
                                  <el-col :span="2">
                                    <img :src="userAvatar" style="height: 40px;width:40px;border-radius: 5px;float: right;" lazy></img>
                                  </el-col>
                                </el-row>

                              <el-row v-if="msg.userfile !== ''" class="bot-message">
                                  <el-col :span="24"></el-col>

                                    <el-col  class="message-content usercontent"><a :href="msg.userfile">[文件]{{ msg.userfilename }}</a></el-col>
                              </el-row>

                            </div>
                        </div>
                    </div>
                </el-card>
                </el-row>
                <el-row>
                <transition name="fade">
                  <el-footer v-if="userfilename !== ''">
                      <el-row>
                        <el-col :span="22">
                          {{ userfilename }}
                        </el-col>
                        <el-col :span="2">
                          <el-button type="danger" icon="el-icon-delete" @click="delUserfile()" circle></el-button>
                        </el-col>
                      </el-row>
                  </el-footer>
                </transition>
                <div class="el-sub">

                    <el-row :gutter="10">
                        <el-col :span="20">
                            <el-input
                            class="shadow"
                            v-model="chatarea"
                            :rows="5"
                            type="textarea"
                            resize="none"
                            placeholder="请输入内容"
                            @keyup.ctrl.enter.native="sendText"
                            >
                            </el-input>

                        </el-col>
                        <el-col :span="4">
                          <br>
                          <el-row>
                            <el-button  class="shadow"  @click="sendText" icon="el-icon-s-promotion">发送</el-button>
                          </el-row>
                          <br>
                          <el-row>
                            <el-button  class="shadow" @click="sendFile" icon="el-icon-circle-plus">上传</el-button>
                          </el-row>


                        </el-col>


                    </el-row>
                </div>
                </el-row>
              </el-main>
            </el-col>
            <el-col :span="12">
              <el-main>
                <el-row>
                  <el-card>
                    <div class="modify-box">
                      <el-row>
                        <div v-if="scrollIndex >=0 && receiveList.length > 0 && receiveList[scrollIndex].msgtype === 'bot'">

                          <el-row class="bot-message message-content">

                            <div v-if="receiveList[scrollIndex].reply.length > 0" class="message-content replycontent">{{ receiveList[scrollIndex].reply }}</div>
                            <div v-else class="message-content replycontent">无内容</div>
                          </el-row>
                          <el-row v-if="receiveList[scrollIndex].userfile !== ''" class="message-content">
                            <div class="message-content replycontent"><a :href="receiveList[scrollIndex].userfile">[文件]{{ receiveList[scrollIndex].userfilename }}</a></div>
                          </el-row>
                        </div>

                      </el-row>

                    </div>
                    <el-row style="line-height: 40px;" v-if="scrollIndex >=0 && receiveList.length > 0">

                        <el-col :span="6"><div></div></el-col>
                        <el-col :span="6"><div></div></el-col>
                        <el-col :span="3">
                          <div><el-button class="shadow"  @click="lastItem()" icon="el-icon-back" round></el-button></div>
                        </el-col>
                        <el-col :span="3"><div><el-button class="shadow"  @click="nextItem()" icon="el-icon-right" round></el-button></div></el-col>
                        <el-col :span="3">
                          <div><el-button class="shadow" type="primary" @click="modify(1)" plain>修改</el-button></div>
                        </el-col>
                        <el-col :span="3">
                          <div><el-button class="shadow" type="primary" @click="confirmItem">确定</el-button></div>
                        </el-col>

                      </el-row>
                  </el-card>
                </el-row>

                <el-row>
                <el-card>
                  <div class="reply-box">
                      <el-row>
                        <div v-if="followIndex >= 0 && confirmList.length > 0 && confirmList[followIndex].msgtype === 'bot'">
                          <el-row class="bot-message message-content">
                            <!--
                            <el-col :span="2">
                              <div><img :src="toAvatar" style="height: 40px;width:40px;border-radius: 5px; " lazy></img></div>
                            </el-col>
                            -->
                            <div v-if="confirmList[followIndex].reply.length > 0" class="message-content replycontent">{{ confirmList[followIndex].reply }}</div>
                            <div v-else class="message-content replycontent">无内容</div>
                          </el-row>
                          <el-row v-if="confirmList[followIndex].userfile !== ''" class="message-content">
                            <div class="message-content replycontent"><a :href="confirmList[followIndex].userfile">[文件]{{ confirmList[followIndex].userfilename }}</a></div>
                          </el-row>
                          <el-row v-if="confirmList[followIndex].robotfile !== ''" class="message-content">
                            <div class="message-content replycontent"><a :href="confirmList[followIndex].robotfile">[文件]{{ confirmList[followIndex].robotfilename }}</a></div>
                          </el-row>
                        </div>

                      </el-row>
                  </div>
                </el-card>
                  <el-row v-if="followIndex >= 0 && confirmList.length > 0">
                      <div>
                        <transition name="fade">
                          <el-row v-if="robotfilename !== ''" class="el-footer">
                            <el-col :span="22">
                              {{ robotfilename }}
                            </el-col>
                            <el-col :span="2">
                              <el-button type="danger" icon="el-icon-delete" @click="delModifyfile()" circle></el-button>
                            </el-col>
                          </el-row>
                        </transition>
                        <el-row style="line-height: 40px;">

                          <el-col :span="6"><div></div></el-col>
                          <el-col :span="6"><div></div></el-col>
                          <el-col :span="3"><div></div></el-col>
                          <el-col :span="3">
                            <el-button class="shadow" type="primary" @click="modify(2)" plain>修改</el-button>
                          </el-col>
                          <el-col :span="3">
                            <el-button class="shadow" type="success" @click="sendModifyFile">上传</el-button>
                          </el-col>
                          <el-col :span="3">
                            <el-button class="shadow" type="primary" @click="modifyText">确定</el-button>
                          </el-col>
                        </el-row>
                    </div>
                  </el-row>
                </el-row>

              </el-main>
            </el-col>
          </el-row>


    </el-container>
</template>
<style>

 .el-header {
    background: linear-gradient(to bottom, #008bb9 0%, #33ccff 100%);
    color: #ffffff;
    text-align: center;
    line-height: 50px ;
  }
  .el-footer {
    background-color:  #00678a;
    color: #ffffff;
    text-align: left;
    line-height: 60px;
  }
  .el-main {
    background-color: #ffffff;
    color: #333;
    text-align: left;
  }
  .el-aside {
    background: #ffffff;
    color: #333;
    text-align: center;
  }
  .el-sub {
    background-color: #ffffff;
    color: #333;
    text-align: left;
  }
  .el-col {
    border: 1px solid transparent;
  }
  .el-sub .shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .chat-box {
    height: calc(100vh - 320px);
    overflow-y: auto;
    padding: 10px;
    border-bottom: 1px solid #dcdfe6;
  }
  .get-history {
    width: 100%;
    background-color: #00bbf9;
    line-height: 40px;
    text-align: center;
  }
  .modify-box {
    height: calc(100vh / 3);
    overflow-y: auto;
    padding: 10px;
    border-bottom: 1px solid #dcdfe6;
  }
  .reply-box {
    height: calc(100vh / 3);
    overflow-y: auto;
    padding: 10px;
    border-bottom: 1px solid #dcdfe6;
  }
  .message {
    margin: 10px 0;
    display: flex;
    align-items: center;
  }
  .user-message, .bot-message {
    margin-top: 2px;
    display: flex;
    align-items: center;
  }
  .message-content {
    max-width: 70%; /* 确保消息内容框不超过聊天框宽度 */
    min-width: 15%;
    background-color: #ffffff; /* 随意选择背景颜色 */
    border-radius: 5px; /* 圆角 */
    padding: 10px; /* 内边距 */
    overflow-wrap: anywhere; /* 使长文本换行 */
    white-space: pre-line; /* 允许文本在标签内换行 */
    word-wrap: break-word; /* 兼容旧版浏览器 */
  }
   .botname {
    background-color: #d1e7dd;
  }
   .botcontent {
    background-color: #cfe2ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
   .username {
    background-color: #d1e7dd;
  }
   .usercontent {
    background-color: hsl(152, 98%, 52%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
   .replycontent {
    background-color:#9cb2fc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>
<script>
import { getConnection,getRole,getUserAvatar } from "@/api/role/tourist";
import { getToken } from "@/utils/auth";
import { getChatHistory } from "@/api/robot/chat"

import Cookies from "js-cookie";

export default {
    data() {
        return {
            ws: null,
            page: 0,
            tabPosition: 'first',
            uploadFile:'',
            uploadModifyFile: '',
            radio:'1',
            robotId : 2,
            userId: 2,
            ip: '',
            port: '',
            userName: 'null',
            robotName: 'null',
            userAvatar: '',
            toAvatar: '',
            userfile:'',
            robotfile:'',
            userfilename:'',
            robotfilename:'',
            chatarea: '',
            createTable: false,
            getFile: {
              open: false,
              headers: { Authorization: "Bearer " + getToken() },
              uploadFileUrl: process.env.VUE_APP_BASE_API + '/common/upload',
              fileName:[],
            },
            getModifyFile: {
              open: false,
              headers: { Authorization: "Bearer " + getToken() },
              uploadFileUrl: process.env.VUE_APP_BASE_API + '/common/upload',
              fileName:[],
            },
            confirmModifyText: {
              open: false,
              digModal: 0,
              confirmText:'',
            },
            queryParams: {
              pageNum: 1,
              pageSize: 10,
              total: 0,
              totalPage: 0,
              nameId:'',
              toId:''
            },
            row: 1,
            col: 1,
            rows: ["",],
            cols: ["",],
            scrollIndex: -1,
            followIndex: -1,
            connData:[],
            messageList:[],
            receiveList:[],
            confirmList:[],
            tabledatas:[],
            senddata: [],
            chatdata: {
              name:'',
              nameId:'',
              toName:'',
              toId:'',
              content:'',
              reply:'',
              userfile:'',
              robotfile:'',
              userfilename:'',
              robotfilename:'',
              flag:'',
              msgtype:'',
              position:''
            }
        }
    },
    created(){

      var user = this.$store.state.user;
      this.userName = user.name
      this.userId = user.id
      //连接对话后端
      this.getConn();
    },
    watch:{
      //监视当前选择的分词对话窗index值
      'scrollIndex':{
        handler(newVal){
          this.followIndex = -1;
          for(var i=0;i < this.confirmList.length;i++)
          {
            if(this.confirmList[i].flag === this.receiveList[newVal].flag)
            {
              this.followIndex = i;
              break;
            }
          }
        }
      }
    },
    beforeDestroy() {
      if (this.ws) {
        this.ws.close(); // 关闭连接
      }
    },
    methods: {
      //初始化
      clearData(){
        //this.scrollIndex = -1;
        //this.followIndex = -1;
        this.page = 0;
        this.row = 1;
        this.col = 1;
        this.rows = ["",];
        this.cols = ["",];
        this.chatarea = '';
        this.senddata = [];
        this.robotfile = '';
        this.robotfilename = '';
        this.userfile = '';
        this.userfilename = '';
        this.uploadFile = '';
        this.uploadModifyFile = '';
        this.getFile= {
              open: false,
              headers: { Authorization: "Bearer " + getToken() },
              uploadFileUrl: process.env.VUE_APP_BASE_API + '/common/upload',
              fileName:[],
        },
        this.getModifyFile= {
              open: false,
              headers: { Authorization: "Bearer " + getToken() },
              uploadFileUrl: process.env.VUE_APP_BASE_API + '/common/upload',
              fileName:[],
        },
        this.confirmModifyText= {
              open: false,
              digModal: 0,
              confirmText:'',
        },
        this.chatdata = {
              //name:'',
              //nameId:'',
              //toName:'',
              //toId:'',
              content:'',
              reply:'',
              userfile:'',
              robotfile:'',
              userfilename:'',
              robotfilename:'',
              table:'',
              flag:'',
              msgtype:'',
              position:''
        };
      },
      //获取连接
      getConn(){
        getConnection().then(response=>{
          this.ip = response.data.ipAddress
          this.port = response.data.port
          this.robotId = response.data.userId
          this.robotName = response.data.userName
          this.connectWS(this.ip,this.port,this.userId)
          var idlist = {'nameId': this.userId, 'toId': this.robotId};
          //获取头像
          getUserAvatar(idlist).then(response=>{
            var res = response.rows[0];
            this.userAvatar = (res['nameId'] == "" || res['nameId'] == null)  ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + res['nameId'];
            this.toAvatar = (res['toId'] == "" || res['toId'] == null)  ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + res['toId'];
          })
          //this.getHistoryItems();
        });
      },
      //连接后端
      connectWS(ip,port,userId)
      {
        //const TokenKey = Cookies.get("Admin-Token")
        var address = "ws://" + ip + ":" + port + "/websocket/" + userId;
        this.ws = new WebSocket(address)
        this.ws.onopen = () =>
        {
          console.log('连接成功');
          //this.sendWsMessage();

        }
        this.ws.onerror = (error) => console.log('出现错误', error);
        //接收消息，根据消息状态推送到不同对话框
        this.ws.onmessage = (message) =>
        {

          var response = JSON.parse(message.data);

          if(response.position === '0')
          {

          }
          else if(response.position === '1')
          {
            this.receiveList.push(response)
            this.scrollIndex = this.receiveList.length - 1;
          }
          else if(response.position === '2')
          {
            //确认分词后，检查回复框有没有对应条目，有的话赋值给对应条目，没有的话新插入一条
            var hasFlag = -1;
            for(var i = 0; i < this.confirmList.length; i++)
            {
              if(this.confirmList[i].flag === response.flag)
              {
                hasFlag = 1;
                this.confirmList[i] = response;
                break;
              }
            }
            if(hasFlag == -1)
            {
              this.confirmList.push(response)
            }
            for(var j = 0; j < this.confirmList.length; j++)
            {
              if(this.confirmList[j].flag === this.receiveList[this.scrollIndex].flag)
              {
                this.followIndex = j;
              }
            }

          }
          else if(response.position === '3')
          {
            this.messageList.push(response)
          }
          else
          {

          }
        }
        this.ws.onclose = () =>{
          //this.connectWS(ip,port,userId)
        };
      },
      //发送webSocket消息
      sendWsMessage(msg) {

        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
          this.ws.send(JSON.stringify(msg));
          this.clearData();
        }
      },
      disconnectWS()
      {
        if (this.ws) {
          this.ws.close();
        }
      },
      //获取年月日时分秒字符串
      getDateTime()
      {
        const currentDate = new Date();
        return currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1) + '-' + currentDate.getDay() + ' ' + currentDate.getHours() + ':' + currentDate.getMinutes() + ':' + currentDate.getSeconds();
      },
      //日期比较函数，形成字符串如:202411201529,通过做差比较
      compareDate(cmpdate1,cmpdate2)
      {
        var date1 = cmpdate1.split(' ')[0];
        var date2 = cmpdate2.split(' ')[0];
        var time1 = cmpdate1.split(' ')[1];
        var time2 = cmpdate2.split(' ')[1];
        var year1 = Number(date1.split('-')[0]);
        var year2 = Number(date2.split('-')[0]);
        var month1 = Number(date1.split('-')[1]);
        var month2 = Number(date2.split('-')[1]);
        var day1 = Number(date1.split('-')[2]);
        var day2 = Number(date2.split('-')[2]);
        var hour1 = Number(time1.split(':')[0]);
        var hour2 = Number(time2.split(':')[0]);
        var min1 = Number(time1.split(':')[1]);
        var min2 = Number(time2.split(':')[1]);
        var sec1 = Number(time1.split(':')[2]);
        var sec2 = Number(time2.split(':')[2]);
        var cdate1 = String(year1) + (month1 < 10 ? "0" + String(month1) : String(month1)) + (day1 < 10 ? "0" + String(day1) : String(day1)) + (hour1 < 10 ? "0" + String(hour1) : String(hour1)) + (min1 < 10 ? "0" + String(min1) : String(min1)) + (sec1 < 10 ? "0" + String(sec1) : String(sec1));
        var cdate2 = String(year2) + month2 < 10 ? "0" + String(month2) : String(month2) + day2 < 10 ? "0" + String(day2) : String(day2) + hour2 < 10 ? "0" + String(hour2) : String(hour2) + min2 < 10 ? "0" + String(min2) : String(min2) + sec2 < 10 ? "0" + String(sec2) : String(sec2);
        var dif = Number(cdate1) - Number(cdate2)
        if(dif >= 0)
        {
          return true;
        }
        else
        {
          return false;
        }
        /*

        var difYear = year1 - year2;
        var difMon = month1 - month2;
        var difDay = day1 - day2;
        var difH = hour1 - hour2;
        var difMin = min1 - min2;
        var difSec = sec1 - sec2;
        if(difYear > 0)
        {
          return true;
        }
        else if(difYear < 0)
        {
          return false;

        }
        else if(difYear == 0)
        {
          if(difMon > 0)
          {
            return true;
          }
          else if(difMon < 0)
          {
            return false;
          }
          else if(difMon == 0)
          {
            if(difDay > 0)
            {
              return true;
            }
            else if(difDay < 0)
            {
              return false;
            }
            else if(difDay == 0)
            {
              if(difH > 0)
              {
                return true;
              }
              else if(difH < 0)
              {
                return false;
              }
              else if(difH == 0)
              {
                if(difMin > 0)
                {
                  return true;
                }
                else if(difMin < 0)
                {
                  return false;
                }
                else if(difMin == 0)
                {
                  if(difSec >= 0)
                  {
                    return true;
                  }
                  else
                  {
                    return false;
                  }
                }
              }
            }
          }
        }
          */

      },
      //获取历史对话条目，通过flag去重
      getHistoryItems()
      {
        //var ids = {'nameId': this.userId, 'toId': this.robotId};
        this.queryParams.nameId = this.userId;
        this.queryParams.toId = this.robotId;
        getChatHistory(this.queryParams).then(response=>{
          this.queryParams.total =  response.total;
          this.queryParams.totalPage = Math.ceil(response.total / this.queryParams.pageSize);
          var index = -1;
          for(let i = 0;i < response.rows.length;i++)
          {
            if(this.messageList.length > 0)
            {
              for(let j = 0; j < this.messageList.length;j++)
              {
                if(response.rows[i].flag == this.messageList[j].flag && response.rows[i].position == this.messageList[j].position)
                {
                  index = -1;
                  break;
                }
                else
                {
                  if(this.compareDate(this.messageList[j].flag,response.rows[i].flag))
                  {

                    index = j;
                    break;
                  }
                }
              }
            }
            else
            {
              index = 0;
            }
            if(index != -1)
            {
              this.messageList.splice(index,0,response.rows[i]);
              if(index < this.scrollIndex)
              {
                this.scrollIndex = this.scrollIndex +1
              }
            }

          }
        })

      },
      //请求不同页
      loadHistory(){
        if(this.queryParams.pageNum == this.queryParams.totalPage)
        {
          this.$alert('无更多内容', '提示', {
            confirmButtonText: '确定',
          })
          return;
        }
        var ids = {'nameId': this.userId, 'toId': this.robotId};
        if(Number(this.queryParams.pageNum) < Number(this.queryParams.totalPage))
        {
          this.queryParams.pageNum = Number(this.queryParams.pageNum) + 1;
        }
        this.getHistoryItems();
      },
      //分词对话框：上一条目，下一条目
      nextItem()
      {
        if(this.scrollIndex < this.receiveList.length - 1)
        {
          this.scrollIndex = this.scrollIndex + 1;
        }
      },
      lastItem()
      {
        if(this.scrollIndex > 0)
        {
          this.scrollIndex = this.scrollIndex - 1;
        }
      },
      sendText()
      {
        if(this.chatarea.length > 0 || this.userfile.length > 0)
        {
          this.chatdata = {name:this.userName,nameId:this.userId,toName:this.robotName,toId:this.robotId,content:this.chatarea,reply:'',userfile:this.userfile,robotfile:this.robotfile,userfilename:this.userfilename,robotfilename:this.robotfilename,flag: this.getDateTime(),msgtype:'user',position: '0'};
          this.messageList.push(this.chatdata);
          this.sendWsMessage(this.chatdata);
        }
        else
        {
          this.$alert('内容不能为空', '提示', {
          confirmButtonText: '确定',
          })
        }

      },
      //发送文件
      sendFile()
      {
        this.getFile.open = true;
      },
      sendModifyFile()
      {
        this.getModifyFile.open = true;
      },
      modifyText()
      {
        this.chatdata = {name:this.robotName,nameId:this.robotId,toName:this.userName,toId:this.userId,content:this.confirmList[this.followIndex].content,reply:this.confirmList[this.followIndex].reply,userfile:this.confirmList[this.followIndex].userfile,robotfile:this.confirmList[this.followIndex].robotfile,userfilename:this.confirmList[this.followIndex].userfilename,robotfilename:this.confirmList[this.followIndex].robotfilename,flag: this.confirmList[this.followIndex].flag,msgtype:'bot',position: '3'};
        this.sendWsMessage(this.chatdata);
      },
      fileOK(){
        this.getFile.open = false
      },
      fileCancel(){
        this.getFile.open = false
        //this.userfile = ''
        //this.userfilename = ''
      },
      modifyFileOK(){
        this.getModifyFile.open = false
      },
      modifyFileCancel(){
        this.getModifyFile.open = false
        //this.robotfile = ''
        //this.robotfilename = ''
      },
      confirmTextOK(){
        if(this.confirmModifyText.confirmText.length > 0 )
        {
          if(this.confirmModifyText.digModal == 1)
          {
            this.receiveList[this.scrollIndex].reply = this.confirmModifyText.confirmText.replaceAll('/','\n');
          }
          else if(this.confirmModifyText.digModal == 2)
          {
            this.confirmList[this.followIndex].reply = this.confirmModifyText.confirmText;
          }

          this.confirmModifyText= {
              open: false,
              digModal: 0,
              confirmText:'',
          }
        }
        else
        {
          this.$alert('内容不能为空', '提示', {
          confirmButtonText: '确定',
          })
        }
      },
      confirmTextCancel(){
        this.confirmModifyText= {
              open: false,
              digModal: 0,
              confirmText:'',
        }
      },
      confirmItem(){
        this.chatdata = {name:this.userName,nameId:this.userId,toName:this.robotName,toId:this.robotId,content:this.receiveList[this.scrollIndex].content,reply:this.receiveList[this.scrollIndex].reply,userfile:this.receiveList[this.scrollIndex].userfile,robotfile:this.receiveList[this.scrollIndex].robotfile,userfilename:this.receiveList[this.scrollIndex].userfilename,robotfilename:this.receiveList[this.scrollIndex].robotfilename,flag: this.receiveList[this.scrollIndex].flag,msgtype:'bot',position: '2'};
        this.sendWsMessage(this.chatdata)
      },
      modify(modal){

        this.confirmModifyText.digModal = modal

        if(modal == 1)
        {
          this.confirmModifyText.confirmText = this.receiveList[this.scrollIndex].reply.replace(/\n/g,'/');
        }
        else if (modal == 2)
        {
          this.confirmModifyText.confirmText = this.confirmList[this.followIndex].reply
        }
        this.confirmModifyText.open = true;
      },
      //用户文件上传成功
      handleFileSuccess(response, file, fileList) {
        this.uploadFile = response.fileName
        this.userfile = response.url
        this.userfilename = response.newFileName
        this.getFile.open = false;
        //this.clearData();
      },
      //删除用户文件
      delUserfile()
      {
        this.userfile='';
        this.userfilename='';
        this.uploadFile = '';
        this.getFile.fileName = [];
      },
      delModifyfile()
      {
        this.confirmList[this.followIndex].robotfile = '';
        this.confirmList[this.followIndex].robotfilename = '';
        this.robotfile = '';
        this.robotfilename = '';
        this.uploadModifyFile = '';
      },
      handleModifyFileSuccess(response, file, fileList) {
        this.uploadModifyFile = response.fileName
        this.confirmList[this.followIndex].robotfile = response.url
        this.confirmList[this.followIndex].robotfilename = response.newFileName
        this.robotfile = response.url
        this.robotfilename = response.newFileName
        this.getModifyFile= {
              open: false,
              headers: { Authorization: "Bearer " + getToken() },
              uploadFileUrl: process.env.VUE_APP_BASE_API + '/common/upload',
              fileName:[],
        }
      }

    }
}
</script>
